<template>
  <div>
  <a-card>
  
    <a-form
      ref="formRef"
      :model="repairForm"
      :label-col="{ span: 2 }"
      :wrapper-col="{ span: 24 }"
      class="border border-gray-200 solid"
    >
      <a-form-item
        label="订单号"
        name="order_no"
        :rules="[
          ruleStore.getRule('order_no')
            ? ruleStore.getRule('order_no')
            : { required: false },
        ]"
      >
        <a-input v-model:value="repairForm.order_no" disabled></a-input>
      </a-form-item>

      <a-form-item
              label="报修类型"
              name="way"
              :rules="[
                ruleStore.getRule('way')
                  ? ruleStore.getRule('way')
                  : { required: false },
              ]"
            >
              <a-radio-group @change="changeWay" v-model:value="repairForm.way">
                <a-radio :value="1"> 正常 </a-radio>
                <a-radio :value="2"> 现场应急 </a-radio>
              </a-radio-group>
            </a-form-item>

            <a-form-item
              label="联系人"
              name="user_name"
              :rules="[
                ruleStore.getRule('user_name')
                  ? ruleStore.getRule('user_name')
                  : { required: false },
              ]"
            >
              <a-input v-model:value="repairForm.user_name"></a-input>
            </a-form-item>
            <a-form-item
              label="联系电话"
              name="phone"
              :rules="[
                ruleStore.getRule('phone')
                  ? ruleStore.getRule('phone')
                  : { required: false },
              ]"
            >
              <a-input v-model:value="repairForm.phone"></a-input>
            </a-form-item>
            <a-form-item
              label="故障类型"
              name="repair_type_id"
              :rules="[
                ruleStore.getRule('repair_type_id')
                  ? ruleStore.getRule('repair_type_id')
                  : { required: false },
              ]"
            >
              <a-select v-model:value="repairForm.repair_type_id">
                <a-select-option
                  v-for="(i, index) in typeOptions"
                  :key="index"
                  :value="i.id"
                >
                  {{ i.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
      <a-form-item
        label="故障描述"
        name="description"
        :rules="[
          ruleStore.getRule('description')
            ? ruleStore.getRule('description')
            : { required: false },
        ]"
      >
        <a-textarea v-model:value="repairForm.description"></a-textarea>
      </a-form-item>
      <a-form-item
        label="车牌号"
        name="license"
        :rules="[
          ruleStore.getRule('license')
            ? ruleStore.getRule('license')
            : { required: false },
        ]"
      >
        <a-input v-model:value="repairForm.license"></a-input>
      </a-form-item>

      <a-form-item
        label="图片"
        name="images"
        :rules="[
          ruleStore.getRule('images')
            ? ruleStore.getRule('images')
            : { required: false },
        ]"
      >
        <UploadList v-model="repairForm.images"></UploadList>
      </a-form-item>

      <a-form-item
        name="coordinates"
        label="位置"
         v-if="repairForm.way == 2"
        :rules="[
          ruleStore.getRule('coordinates')
            ? ruleStore.getRule('coordinates')
            : { required: false },
        ]"
      >
        <div id="container" style="width:700px;"></div>

        【精度：{{ repairForm.coordinates?.coordinates[0] }} 纬度：{{
          repairForm.coordinates?.coordinates[1]
        }}】
        <div>地址：{{ repairForm.address }}</div>
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 1, span: 12 }">
        <a-button type="primary" style="width: 100px" @click="onSubmit"
          >提交</a-button
        >
      </a-form-item>
    </a-form>
  </a-card>

  </div>
</template>

<script setup lang="ts">
import useRuleStore from "@/store/modules/rule";
import initMap from "../mapinit";

import Api from "@/api/backend/api";
const ruleStore = useRuleStore();

const route = useRoute();
import XEUtils from "xe-utils";
const typeOptions = ref([])
const getTypeOptions = async () => {
    typeOptions.value = await Api.repairTypeController.list()
}
const getData = (param) => {
    repairForm.value.coordinates.coordinates[1] = param.lat;
    repairForm.value.coordinates.coordinates[0] = param.lng;
    repairForm.value.address = param.address;
};
const repairForm = ref({
  id:null,
  user_name: "",
  phone: "",
  way: 1,
  order_no: "WXD-" + XEUtils.toDateString(new Date(), `yyyyMMddHHmmss`),
  repair_type_id: null,
  description: "",
  license: "",
  images: [],
  coordinates: {
    type: "Point",
    coordinates: [107.466127, 31.224677],
  },
  address: "",
});
const changeWay = (event) => {
  console.log(event.target.value);
  if (event.target.value == 2) {
    renderMap();
  }
};

const renderMap = () => {
  setTimeout(() => {
    console.log("2.有值是初始化");
    if (repairForm.value.coordinates?.coordinates[0] == null) {
      repairForm.value.coordinates.coordinates[1] = 107.466127;
      repairForm.value.coordinates.coordinates[0] = 31.224677;
    }

    initMap(getData, [
      repairForm.value.coordinates.coordinates[1],
      repairForm.value.coordinates.coordinates[0],
    ]);
  }, 1000);
};
renderMap();
const id = ref();
id.value = route.params.id;
if (!id.value) {
  console.error("id空");
}
if (id.value > 0) {
  let  data  = await Api.repairController.show({id:id.value});
  if (data.coordinates.coordinates == null) {
    data.coordinates.coordinates = [107.466127, 31.224677];
  }
  repairForm.value = data;
}

const onSubmit = async () => {
    await Api.repairController.update({id:id.value},repairForm.value);
}
getTypeOptions()

</script>

<style></style>
